<template>
	<view style="padding:0;margin:0;">
		<view class="ceshi" id="editor" :style="'padding-top: ' + (menuTop ? menuTop : 0)">
			<!-- 轮播图 -->
			<view class="container" v-if="search?0:1 && banner_list[0]">
				<swiper    class="swiper" :circular="true" :autoplay="true" :interval="3000" :duration="1000" :current="swiperCurrent"
					@change="changeSwiper">
					<swiper-item v-for="item in banner_list" :key="item.id">
						<image class="swiper-item" :src="item.img_url" mode="widthFix"></image>
					</swiper-item>
				</swiper>

				<view class="dots">
					<block v-for="(item,index) in banner_list.length" :key="item">
						<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
					</block>
				</view>
			</view>
			<view class="list" v-for="(item,index) in list">
				<!-- 内容-文章-置顶 -->
				<view class="article" v-if="item.art_type==0" @click="to_article(item.id)">
					<view class="article-title">
						{{item.title}}
					</view>
					<view class="article-imgs" v-if="item.cover_images.length != 1">
						<image v-for="(item_img,index_img) in item.cover_images" :src="item_img" v-if="item_img"
							class="article-img"></image>
					</view>
                    <view class="article-imgs"  v-else>
                        <image v-for="(item_img,index_img) in item.cover_images" :src="item_img" v-if="item_img"
                        	class="article-img" style="width:100%;height:300upx;"></image>
                    </view>
					<text v-if="item.is_top" class="article-zd">置顶</text>
					<view :style="item.is_top?'':'margin-top:20rpx;'" class="fjx"></view>
				</view>

				<!-- 内容-视频-置顶 -->
				<view class="videos" v-if="item.art_type==1" @click="to_article(item.id)">
					<view class="article-title">
						{{item.title}}
					</view>
					<image class="videos-imgs" :src="item.cover_images[0]"></image>
					<text v-if="item.is_top" class="article-zd">置顶</text>
					<view :style="item.is_top?'':'margin-top:20rpx;'" style="" class="fjx"></view>
				</view>
				
			</view>
			<view id="jiazai"></view>

		</view>
	</view>
</template>

<script>
	export default {
		props: ['class_id','search','class_name'],
		data() {
			return {
				list: [],
				current: 0,
				swiperCurrent: 0,
				banner_list: [],
				formData: {
					class_id: this.class_id,
					page: 1,
					limit: 100
				},
        menuTop:uni.getStorageSync('menuInfo').contentTop
			};
		},
		created() {
		this.get_banner();
		this.get_list();
		},
		onReachBottom() {
		
		},
		 mounted() {
			 var _this=this;
			//  const query = uni.createSelectorQuery().in(this);
			// var cc= setInterval(function(){
			// 	 query.select('#jiazai').boundingClientRect(data => {
			// 		 if(data.top<1000){
			// 			 if(_this.list.length<_this.count){
			// 				 _this.formData.page=_this.formData.page+1;
			// 				 _this.get_list();
			// 			 }else{
			// 				 clearInterval(cc)
			// 			 }
			// 		 }
			// 	 }).exec();
			//  },1000)
		        },
		methods: {
			changeSwiper(e) {
				this.swiperCurrent = e.detail.current;
			},
			get_list() {
				var data = this.formData;
				data.keyword=this.search?this.search:""
				data.class_id = this.class_id;
				var _this = this;
				_this.$api.doRequest("post", "api/art_list", data).then(res => {
					var list=_this.list;
					list=list.concat(res.data.data.list) 
					_this.list = list;
					_this.count=res.data.data.count;
					if(res.data.data.list[0]){
						_this.formData.page=_this.formData.page+1
						_this.get_list()
					}
				})
			},
			get_banner() {
				var data = {
					ad_position:this.class_name
				}
				var _this = this;
				_this.$api.doRequest("get", "api/index_banners", data).then(res => {
					
					_this.banner_list = res.data.data;
				})
			},
			to_article(id){
				uni.navigateTo({
					url:"../../pages/article/index?id="+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.ceshi {
		height: 100vh;
		overflow: auto;
		box-sizing: border-box;
	}

	.zhanwei {}

	.uni-swiper {
		min-height: 100vh;
	}

	.container {
		position: relative;

		.swiper {
			width: 750upx;
			height: 300rpx;
			border-radius: 16rpx;
			// overflow: hidden;
			margin-top: 16rpx;
			position: relative;

			.swiper-item {
				width: 750upx;
				height: 240rpx;
			}

		}

		.dots {
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			// 这里一定要注意兼容不然很可能踩坑          
			transform: translate(-50%, 0);
			-webkit-transform: translate(-50%, 0);
			z-index: 99;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.dot {
				width: 24rpx;
				height: 8rpx;
				transition: all .6s;
				background: rgba(0, 0, 0, .3);
				margin-right: 10rpx;
			}

			.active {
				width: 24rpx;
				height: 8rpx;
				background: rgba(255, 255, 255, .8);
			}
		}
	}

	.article {
		width: 710upx;
		margin: 0upx auto;
		margin-top: 15upx;
	}

	.article-title {
		font-size: 32upx;
		font-weight: 500;
		color: #fff;
		margin: 10upx 0;
	}

	.article-imgs {
		width: 710upx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		text-decoration: none;
	}

	.articles {
		height: 800upx;
		width: 100%;
		background-color: #39B54A;
	}

	.article-img {
		width: 32%;
		height: 130upx;
		border-radius: 15upx;
		;
	}

	.article-zd {
		display: inline-block;
		border: 1px solid #FD603A;
		margin: 15upx 0upx;
		color: #FD603A;
		padding: 5upx 5upx;
		border-radius: 10upx;
		font-size: 14upx;
	}

	.fjx {
		width: 100%;
		height: 5upx;
		background-color: #f4f4f4;
	}

	.videos {
		width: 710upx;
		margin: 0upx auto;
		margin-top: 15upx;
	}

	.videos-imgs {
		width: 710upx;
		height: 450upx;
	}
</style>
